<template>
  <div id="tjbb-khfw">
    <el-date-picker
      v-model="selectValueBD"
      @change="onSelectChangeBD"
      style="width: 20vw"
      type="year"
      value-format="yyyy"
      placeholder="选择年"
    >
    </el-date-picker>

    <div id="myChart" :style="{ width: '100%', height: '65vh' }"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectValueBD: null,
      selectOptionsBD: null,
      myChart: null,
    };
  },
  mounted: function () {
    // 基于准备好的dom，初始化echarts实例
    this.myChart = this.$echarts.init(document.getElementById("myChart"));
    //this.initEcharts();
  },
  methods: {
    initEcharts(title, datas, datas2) {
      // 绘制图表
      this.myChart.setOption({
        title: { text: title },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} 人({d}%)",
        },
        series: [
          {
            name: "服务满意度",
            type: "pie",
            center: ["25%", "30%"],
            radius: "55%",
            data: datas,
            roseType: "angle",
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  formatter: "{a}-{b} : {c} 人({d}%)",
                },
                labelLine: { show: true },
              },
            },
          },
          {
            name: "评价",
            type: "pie",
            center: ["70%", "70%"],
            radius: "55%",
            data: datas2,
            roseType: "angle",
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  formatter: "{a}-{b} : {c} 人({d}%)",
                },
                labelLine: { show: true },
              },
            },
          },
        ],
      });
    },
    onSelectChangeBD(opt) {
      //   console.log(opt);
      this.$axios({
        method: "post",
        crossdomain: true,
        url: "/statement/yearService",
        data: this.$qs.stringify({ year: opt }), //this.$qs.stringify
      }).then((response) => {
        // console.log(response.data.data[0]); //请求成功返回的数据
        let datas = [];
        let datas2 = [];
        if (response.data.data[0] != null) {
          response.data.data[0][0].forEach((e) => {
            datas.push({
              value: e["count(customer_id)"],
              name: e["services_satisfaction"],
            });
          });

          response.data.data[0][1].forEach((e) => {
            datas2.push({
              value: e["count(customer_id)"],
              name: e["services_type"],
            });
          });
        }

        this.initEcharts(
          "", //response.data.data[0][0].customer.customer_name,
          datas,
          datas2
        );
      });
    },
  },
};
</script>

<style></style>
